<template>
    <el-dialog v-if="dialogVisible" :close-on-click-modal='false' v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)" :title="title?title:'添加模板'" top="8vh" :visible.sync="dialogVisible" @close="resetForm()" width="800px">
        <div class="free_box flexbox">
            <div class="free_left flex">
                <div class="free_title">添加账户</div>
                <div class="model_title">选择平台</div>
                <div class="flexbox flexcenter flexbetween catch_type">
                    <div class="time_type_item flexbox flexcenter" :class="{'active':platformType=='1'}" @click="changeType(1)">
                        <svg width="34" height="36" viewBox="0 0 34 36" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <g opacity="0.47" filter="url(#filter0_f_8333_86452)">
                                <path d="M22.2704 21H10.7296C10.3266 21 10 21.1722 10 21.3846V25.6154C10 25.8278 10.3266 26 10.7296 26H22.2704C22.6733 26 23 25.8278 23 25.6154V21.3846C23 21.1722 22.6733 21 22.2704 21Z" fill="#4475FF" />
                            </g>
                            <path d="M8.41691 15.4427L11.9624 14.5564L9.72343 21.3178H6.17798L8.41691 15.4427Z" fill="#4475FF" />
                            <path d="M19.976 7.13636L23.5215 6.25L19.0896 21.3182H15.5442L19.976 7.13636Z" fill="#4475FF" />
                            <path d="M12.678 23.9778C12.678 24.9569 11.8843 25.7505 10.9053 25.7505C9.92625 25.7505 9.13257 24.9569 9.13257 23.9778C9.13257 22.9988 9.92625 22.2051 10.9053 22.2051C11.8843 22.2051 12.678 22.9988 12.678 23.9778Z" fill="#4475FF" />
                            <path d="M21.5417 23.9778C21.5417 24.9569 20.748 25.7505 19.7689 25.7505C18.7899 25.7505 17.9962 24.9569 17.9962 23.9778C17.9962 22.9988 18.7899 22.2051 19.7689 22.2051C20.748 22.2051 21.5417 22.9988 21.5417 23.9778Z" fill="#4475FF" />
                            <path d="M23.8111 9.73438L26.3606 9.73442C27.1062 9.73443 27.7106 10.3389 27.7107 11.0845C27.7107 11.8302 27.1062 12.4347 26.3605 12.4347H23.2789L23.8111 9.73438Z" fill="#4475FF" />
                            <path d="M22.97 13.7541L28.65 13.754C29.3955 13.7539 29.9999 14.3583 29.9999 15.1038C29.9999 15.8493 29.3956 16.4537 28.6501 16.4537L22.4083 16.4539L22.97 13.7541Z" fill="#4475FF" />
                            <path d="M21.9818 17.7725L25.4305 17.7728C26.176 17.7729 26.7802 18.3772 26.7802 19.1226C26.7802 19.8681 26.1759 20.4725 25.4304 20.4725H21.4621L21.9818 17.7725Z" fill="#4475FF" />
                            <path d="M14.4507 10.6813L17.9961 9.79492L14.4507 21.3176H10.9052L14.4507 10.6813Z" fill="#4475FF" />
                            <defs>
                                <filter id="filter0_f_8333_86452" x="0" y="11" width="33" height="25" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                                    <feFlood flood-opacity="0" result="BackgroundImageFix" />
                                    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
                                    <feGaussianBlur stdDeviation="5" result="effect1_foregroundBlur_8333_86452" />
                                </filter>
                            </defs>
                        </svg>
                        <span class="time_type_text">小店随心推</span>
                    </div>
                    <div class="time_type_item flexbox flexcenter" :class="{'active':platformType=='2'}" @click="changeType(2)">
                        <svg width="44" height="40" viewBox="0 0 44 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M6.19995 15.928L11.8872 14.2156L18.1457 16.927L13.1679 18.4974L6.19995 15.928ZM13.3095 11.3621L18.9967 9.65134L25.2552 12.3628L20.2774 13.9331L13.3095 11.3621ZM19.851 6.5122L25.5383 4.7998L31.7967 7.51124L26.819 9.08161L19.8526 6.5122H19.851ZM13.0247 27.1998L18.144 25.489V16.9254L13.1679 18.4958L13.0231 27.1982L13.0247 27.1998ZM20.1358 24.6304L25.2568 22.918V12.3628L20.2806 13.9331L20.1358 24.6304ZM26.679 22.3499L31.8 20.6375V7.51124L26.8222 9.08161L26.6774 22.3483L26.679 22.3499Z" fill="#4475FF" />
                            <g opacity="0.47" filter="url(#filter0_f_8333_86455)">
                                <path d="M30.2333 17.4106L11.9776 23.8589C11.3402 24.0841 10.8808 24.429 10.9516 24.6293L12.3607 28.6185C12.4314 28.8188 13.0055 28.7986 13.6429 28.5735L31.8986 22.1252C32.5359 21.9 32.9953 21.5552 32.9246 21.3549L31.5155 17.3656C31.4447 17.1653 30.8707 17.1855 30.2333 17.4106Z" fill="#4475FF" />
                            </g>
                            <defs>
                                <filter id="filter0_f_8333_86455" x="0.256958" y="6.5401" width="43.3622" height="32.9042" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                                    <feFlood flood-opacity="0" result="BackgroundImageFix" />
                                    <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
                                    <feGaussianBlur stdDeviation="5.34372" result="effect1_foregroundBlur_8333_86455" />
                                </filter>
                            </defs>
                        </svg>
                        <span class="time_type_text">千川 PC</span>
                    </div>
                </div>
                <div class="free_text flexbox flexcenter flexbetween">
                    选择账户
                </div>
                <div class="query_input">
                    <el-input size="small" placeholder="请输入名称、ID查询" suffix-icon="el-icon-search" clearable v-model="searchValue">
                    </el-input>
                </div>
                <div class="video_list">
                    <template v-if="userList.length>0">
                        <div class="video_item flexbox flexcenter" v-for="item in filteredData(userList)" :key="item.id">
                            <el-checkbox v-model="item.checked" class="video_check" @change="selectUser(item)"></el-checkbox>
                            <div class="video_right">
                                <div class="video_name">{{item.name}}</div>
                                <div class="video_id">账户 ID：{{item.advertiser_id}}</div>
                            </div>
                        </div>
                    </template>
                    <div v-else class="flexbox flexcenter flexcolumn flexjust" style="height:100%">
                        <img src="../../assets/img/null_icon.svg" alt="">
                        <div class="font_13 color_03">请先选择账户</div>
                    </div>
                </div>
            </div>
            <div class="free_right flex">
                <div class="free_title">已添加账户</div>
                <div class="has_video">
                    <template v-if="hasList.length>0">
                        <div class="has_item flexbox flexcenter" v-for="(item,index) in hasList" :key="item.video_id">
                            <div class="has_left flex">
                                <div class="video_name">{{item.name}}</div>
                                <div class="video_id flexbox flexcenter">账户 ID：{{item.advertiser_id}} <span class="type_text" :class="item.type==1?'green':'blue'">{{item.type==1?"小店":"千川"}}</span></div>
                            </div>
                            <svg class="has_close" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" @click="deleteBrand(item)">
                                <path d="M8.28772 8.2876L15.7123 15.7122" stroke="#B4B7BD" stroke-width="1.5" stroke-linecap="round" />
                                <path d="M8.28772 15.7122L15.7123 8.28754" stroke="#B4B7BD" stroke-width="1.5" stroke-linecap="round" />
                            </svg>
                        </div>
                    </template>
                    <div v-else class="flexbox flexcenter flexcolumn flexjust" style="height:100%">
                        <img src="../../assets/img/null_icon.svg" alt="">
                        <div class="font_13 color_03">暂未添加账户</div>
                    </div>
                </div>
            </div>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button size="small" @click="resetForm()" class="el-button-width">取 消</el-button>
            <el-button size="small" type="primary" @click="submitForm()" class="el-button-width">确 认</el-button>
        </span>

        <el-dialog width="400px" title="模板名称" :close-on-click-modal='false' :visible.sync="innerVisible" append-to-body>
            <el-form label-position="top" :model="queryInfo" :hide-required-asterisk='true' ref="addForm" class="dialog_form">
                <el-form-item label="模板名称设置" prop="name" style="margin-bottom:0" :rules="[{ required: true, message: '请输入模板名称',trigger: ['blur', 'change'] }]">
                    <el-input v-model="queryInfo.name" placeholder="请输入模板名称"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="innerVisible = false" class="el-button-width">取 消</el-button>
                <el-button size="small" type="primary" @click="saveForm('addForm')" :disabled="disabled" :loading="disabled" class="el-button-width">保 存</el-button>
            </span>
        </el-dialog>
    </el-dialog>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            loading:false,
            disabled:false,
            dialogVisible: false,
            innerVisible: false,
            searchValue: "",
            platformType: 1,
            queryInfo: {
                name: "",
                advertiser_follow: [],
                advertiser_qc: [],
            },
            userInfo: {
                query: "",
            },
            advertiser_follow:[],
            advertiser_qc:[],
            hasList: [],
            userList: [],
        };
    },
    created() {
        
    },
    beforeDestroy() {},
    methods: {
        //获取账号
        async getUserList() {
            this.loading = true;
            const { data: res } = await this.$http.post(
                "/autodrop/advertiser/advertiserList",
                this.userInfo
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                let list = res.data.map((item) => {
                    item.checked = false;
                    return item;
                });
                this.userList = list;
            }
        },

        // 平台选择
        changeType(type) {
            if (type == this.platformType) {
                return;
            } else {
                this.platformType = type;
                let arrList =
                    type == 1
                        ? this.advertiser_follow
                        : this.advertiser_qc;
                this.isSelect(arrList);
            }
        },

        isSelect(arr) {
            let list = this.userList.map((item) => {
                item.checked = false;
                return item;
            });
            this.userList = list;
            for (let i in this.userList) {
                for (let a in arr) {
                    if (
                        this.userList[i].advertiser_id == arr[a].advertiser_id
                    ) {
                        this.userList[i].checked = true;
                    }
                }
            }
        },

        // 筛选
        filteredData(list) {
            var list = list,
                query = this.searchValue;

            if (!query) {
                return list;
            }
            query = query.trim();

            list = list.filter(function (item) {
                if (item.name) {
                    if (
                        item.name.indexOf(query) !== -1 ||
                        item.advertiser_id == query
                    ) {
                        return item;
                    }
                }
            });
            return list;
        },

        // 选择
        selectUser(item) {
            if (this.platformType == 1) {
                if (item.checked == true) {
                    this.advertiser_follow.push({
                        name: item.name,
                        advertiser_id: item.advertiser_id,
                        type: 1,
                    });
                } else {
                    let index = this.advertiser_follow.findIndex(
                        (val) => val.advertiser_id == item.advertiser_id
                    );
                    this.advertiser_follow.splice(index, 1);
                }
            } else if (this.platformType == 2) {
                if (item.checked == true) {
                    this.advertiser_qc.push({
                        name: item.name,
                        advertiser_id: item.advertiser_id,
                        type: 2,
                    });
                } else {
                    let index = this.advertiser_qc.findIndex(
                        (val) => val.advertiser_id == item.advertiser_id
                    );
                    this.advertiser_qc.splice(index, 1);
                }
            }
            let arr = [];
            this.hasList = arr.concat(
                this.advertiser_follow,
                this.advertiser_qc
            );
        },

        // 删除
        deleteBrand(item) {
            let arrList =
                item.type == 1
                    ? this.advertiser_follow
                    : this.advertiser_qc;
            let index = arrList.findIndex(
                (val) => val.advertiser_id == item.advertiser_id
            );
            arrList.splice(index, 1);
            let arr = [];
            this.hasList = arr.concat(
                this.advertiser_follow,
                this.advertiser_qc
            );
            if (this.platformType == item.type) {
                this.isSelect(arrList);
            }
        },

        //保存
        submitForm() {
            if (this.hasList.length == 0) {
                this.$message.error("请先添加账户！");
                return;
            }else{
                this.innerVisible = true
            }
        },

        // 提交添加
        saveForm(formName) {
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    this.disabled = true;
                    this.queryInfo.advertiser_follow = this.advertiser_follow.map(item=>{
                        return item.advertiser_id
                    })
                    this.queryInfo.advertiser_qc = this.advertiser_qc.map(item=>{
                        return item.advertiser_id
                    })
                    const { data: res } = await this.$http.post(
                        "/launch/Chase/AddChaseModel",
                        this.queryInfo
                    );
                    if (res.code !== 200) {
                        this.$message.error(res.msg);
                        this.disabled = false;
                        return;
                    } else {
                        this.$message({
                            message: "添加成功",
                            type: "success",
                        });
                        this.disabled = false;
                        this.resetForm(formName);
                        this.$parent.getDataList(1);
                    }
                } else {
                    this.disabled = false;
                    return false;
                }
            });
        },

        resetForm() {
            this.queryInfo.name = "";
            this.queryInfo.advertiser_follow = [];
            this.queryInfo.advertiser_qc = [];
            this.queryInfo.advertiser_qc = [];
            this.advertiser_follow = []
            this.advertiser_qc = []
            this.hasList = []
            this.platformType = 1
            this.searchValue = ""
            this.dialogVisible = false;
            this.innerVisible = false;
        },
    },
    components: {},
};
</script>


<style scoped>
.free_box {
    margin: -20px -20px -10px -20px;
    position: relative;
    border-bottom: 1px solid #ebebeb;
    overflow: hidden;
}
.model_title {
    font-size: 14px;
    color: #17233d;
    line-height: 20px;
    margin-top: 20px;
    padding: 0 20px;
}
.model_name {
    padding: 12px 20px 20px 20px;
}
.free_box::after {
    content: "";
    position: absolute;
    height: 100%;
    border-left: 1px solid #ebebeb;
    left: 50%;
    top: 0;
}
.free_title {
    height: 61px;
    line-height: 61px;
    padding: 0 20px;
    font-size: 16px;
    color: #17233d;
    border-bottom: 1px solid #ebebeb;
}
.free_text {
    margin: 24px 20px 10px;
    font-size: 14px;
    color: #17233d;
}
.video_list {
    height: 310px;
    overflow: auto;
    padding-left: 20px;
    padding-right: 12px;
}
.video_item {
    border: 1px solid #ebebeb;
    border-radius: 4px;
    padding: 12px 20px;
    margin-bottom: 12px;
}
.video_right {
    margin-left: 12px;
}
.video_check {
    flex-shrink: 0;
}
.video_name {
    font-size: 14px;
    line-height: 20px;
    color: #17233d;
    height: 20px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}
.video_id {
    font-size: 13px;
    line-height: 18px;
    color: #b4b7bd;
    margin-top: 8px;
}
.has_video {
    padding: 20px 20px 0;
    overflow: auto;
    height: 500px;
}
.has_item {
    padding: 12px;
    background: rgba(165, 177, 209, 0.08);
    border-radius: 4px;
    margin-bottom: 12px;
}
.has_left {
    margin-right: 12px;
}
.has_close {
    cursor: pointer;
}
.catch_type {
    padding: 0 20px;
    margin-top: 12px;
}
.time_type_item {
    width: 174px;
    box-sizing: border-box;
    padding: 8px 16px;
    border: 1px solid #ebebeb;
    border-radius: 2px;
    cursor: pointer;
    font-size: 14px;
    color: #17233d;
}
.time_type_item.active {
    color: #4475ff;
    border-color: #4475ff;
    background-color: rgba(68, 117, 255, 0.05);
}
.time_type_text {
    margin-left: 10px;
}
.query_input {
    margin: 0 20px 20px;
}
.type_text {
    font-size: 12px;
    margin-left: 10px;
}
.type_text.green {
    color: #67c23a;
    background-color: #dff9de;
    padding: 0 5px;
    border-radius: 3px;
}
.type_text.blue {
    color: #4475ff;
    background-color: #ebf0ff;
    padding: 0 5px;
    border-radius: 3px;
}
</style>
